<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    html,body,header,section,footer,nav,div,ul,ol,li,img,a,span,em,del,center,strong,var,fieldset,form,label,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea{
        margin:0;
        border:0;
        padding:0;
        font-family: Tahoma, Geneva, sans-serif;
        font-style:normal;
    }
html,body {
    -webkit-touch-callout:none;
    -webkit-text-size-adjust:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-user-select:none;
}
header,footer,section,nav,img,a,button,em,del,strong,var,fieldset,label,cite,small,time,mark,code,figcaption,figure,textarea{
    display:block;
}
header,section,footer,nav {
    position:relative;
    overflow:hidden;
}
ol,ul{
    list-style:none;
}
input,button,textarea {
    border:0;
    margin:0;
    padding:0;
    font-size:1em;
    line-height:1em;
    -webkit-appearance:none;
    background-color:rgba(0, 0, 0, 0);
}
span{
    display:inline-block;
}
a,a:visited{
    text-decoration:none;
}
body {
    background-color:#dfdede;
}
#main {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:-webkit-box;
    -webkit-box-orient: vertical;
}
header {
    height:200px;
    background-color:#dfdede;
    display:-webkit-box;
    -webkit-box-orient:vertical;
}
header>div {
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:start;
}
#avatar {
   -webkit-box-flex:1;
   -webkit-box-align:center;
}
.username {
    height:30px
}
.groupname {
    height:40px;
}
#avatar>img {
    width:98px;
    height:98px;
    border-radius:50px; 
}
.username>strong {
    font-size:16px;
    color:#484848;
}
.groupname>em {
    font-size:15px;
    color:#6a99b8;
}
section {
    -webkit-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    background-color:#dfdede;
}
a {
    /*position:relative;-webkit-box-flex:1;*/
   
}

	.forum {
	    color:#737383;
	    background:url(../image/slid/forum.png) no-repeat 40px 24px;
	    -webkit-background-size:22px 22px;
	}
	.url {
	    color:#737383;
	    background:url(../image/slid/url.png) no-repeat 40px 24px;
	    -webkit-background-size:22px 22px;
	}
	.set {
	    color:#737383;
	    background:url(../image/slid/set.png) no-repeat 40px 24px;
	    -webkit-background-size:22px 22px;
	}
    .forum-hov {
        color:#9d9d9d;
        background:url(../image/slid/forum_click.png) no-repeat 40px 24px;
        -webkit-background-size:22px 22px;
    }
    .url-hov {
        color:#9d9d9d;
        background:url(../image/slid/url_click.png) no-repeat 40px 24px;
        -webkit-background-size:22px 22px;
    }
    .set-hov {
        color:#9d9d9d;
        background:url(../image/slid/set_click.png) no-repeat 40px 24px;
        -webkit-background-size:22px 22px;
    }


a>span {
    margin-top:24px;
    margin-left:78px;
    line-height:22px;
    font-size:22px;
    line-height:22px;
}
footer {
    border-top: 1px solid #dfdede;
    height: 40px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    background-color: #dfdede;
}
footer>div {
    width:128px;
    height:30px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    background:url(../image/about_us.png) no-repeat center;
    -webkit-background-size:128px 30px;
}
footer>div>em {
    color: #3c7390;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
}
.logout{
    -webkit-background-size:128px 30px!important;
    color: #6a99b8!important;
}


</style>
</head>
<body>
    <div id="main">
        <header id="header">
            <div id="avatar" onclick="login()">
                <img src="../image/slid/avatar.png" />
            </div>
            <div class="username">
                <strong id="username">未登錄</strong>
            </div>
            <div class="groupname">
                <em id="groupname"></em>
            </div>
        </header>
        <section>
            <a class="forum" tapmode="forum-hov" onclick="openFrm(0, '草榴社區')">
                <span>草榴社區</span>
            </a>
            <a class="url" tapmode="url-hov" onclick="set_site()">
                <span>修改地址</span>
            </a>
            <!--a class="set" tapmode="set-hov" onclick="openFrm(1, '系統設置')">
                <span>系统设置</span>
            </a-->
        </section>

        <footer>
        <div id="logout" style="display: none;" tapmode="logout" onclick="logout()">
            <em>退出登錄</em>
        </div>
    </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
    window.apiready = function(){
        var main = $api.byId('main');
        main.style.width = (api.frameWidth - 48)+'px';
        var header = $api.byId('header');
        $api.fixIos7Bar(header);
        setUserInfo();
    };
    
	function openFrm(index, title){
	   
	    if (typeof index == 'number') {
	    	$api.setStorage('index', index);
	        api.execScript({
	            name: 'slide',
	            script: 'setFrameGroupIndex(' + index + ', "' + title + '" )'
	        });
	    }
	    
		api.closeSlidPane();
	}
	
	function set_site(){
	    api.openWin({
	        name: 'win_setsite',
	        url: 'win_setsite.html',
	        slidBackEnabled: false,
	    });
	
	}
	
	function login(){
		if($api.getStorage('uid')){
			logout()
			return false;
		}
	
	    api.openWin({
	        name: 'win_login',
	        url: 'win_login.html',
	    });
	}
	
	function logout(){
		api.confirm({
		    msg: '確認退出？',
		    buttons:['確定', '取消']
		},function(ret,err){
		    if(ret.buttonIndex != 1){
		        return false;
		    }
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    modal: false
			});
				api.ajax({
				    url: OpenAPI.logout,
				    method: 'get',
				    timeout: 30,
				    dataType: 'text',
				    charset: 'gbk',
				    returnAll:true,
				},function(ret,err){
					api.hideProgress();
				    if (parseInt(ret.statusCode) == 200) {
				    	$api.rmStorage('uid');
				    	$api.rmStorage('username');
				    	$api.rmStorage('groupname');
						api.toast({
						    msg: '成功退出',
						    duration:2000,
						    location: 'middle'
						});
						setUserInfo();
				    }else{
				        showErrMgs(err.code, err.msg);
			
				    };
					api.hideProgress();
				});
		    
		});
	}
	
	function setUserInfo(){
        var username = $api.getStorage('username');
        var groupname = $api.getStorage('groupname');

        if("undefined" != typeof username){
        	$('#logout').show();
        	$api.html($api.byId('username'), username);
        }else{
        	$('#logout').hide();
        	$api.html($api.byId('username'), '未登錄');
        }
        
        if("undefined" != typeof groupname){
        	$api.html($api.byId('groupname'), groupname);
        }else{
        	$api.html($api.byId('groupname'), '');
        }
	}
	
	function refreshUserInfo(){
		getUserInfo(ClIP);
	}
</script>
</html>